<%--
  User: 高旭
  Date: 2020/12/16 0016
--%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户信息管理</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.8.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.8.6/themes/icon.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.8.6/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.8.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.8.6/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>

<%--用户展示数据网格--%>
<table class="easyui-datagrid" id="dg" data-options="title:'用户管理',fit:true,pagination:true,rownumbers:true,fitColumns:true,toolbar:'#dg-tb',url:'${pageContext.request.contextPath}/user/list.do'">
    <thead>
    <tr>
        <th data-options="field:'cb',checkbox:true,align:'center'"></th>
        <th data-options="field:'id',align:'center'" style="width: 50px">编号</th>
        <th data-options="field:'userName',align:'center'" style="width: 50px">用户名</th>
        <th data-options="field:'password',align:'center'" style="width: 50px">密码</th>
        <th data-options="field:'trueName',align:'center'" style="width: 50px">真实姓名</th>
        <th data-options="field:'email',align:'center'" style="width: 50px">邮件</th>
        <th data-options="field:'phone',align:'center'" style="width: 50px">联系电话</th>
        <th data-options="field:'roleName',align:'center'" style="width: 50px">角色</th>
    </tr>
    </thead>
</table>
<div id="dg-tb">
    <div>
        <a href="javascript:openUserAddDialog()" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
        <a href="javascript:openUserModifyDialog()" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
        <a href="javascript:deleteUser()" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
    </div>
    <div>
        <input class="easyui-textbox" id="s_userName" size="40" data-options="label:'&nbsp;用户名：&nbsp;'">
        <a href="javascript:searchUser()" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">搜索</a>
    </div>
</div>

<%--用户添加/修改对话框--%>
<div class="easyui-dialog" id="dlg" data-options="closed:true,buttons:'#dlg-btns',onClose:closeUserDialog" style="width: 680px;height: 300px;padding: 10px 20px">
    <form id="fm" method="post">
        <table cellspacing="2px">
            <tr>
                <td><input id="userName" name="userName" class="easyui-textbox" data-options="required:true,label:'用户名：'" style="width: 260px">&nbsp;<span style="color: red">*</span></td>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td><input id="password" name="password" class="easyui-passwordbox" data-options="required:true,label:'密码：'" style="width: 260px">&nbsp;<span style="color: red">*</span></td>
            </tr>
            <tr>
                <td><input id="trueName" name="trueName" class="easyui-textbox" data-options="required:true,label:'真实姓名：'" style="width: 260px">&nbsp;<span style="color: red">*</span></td>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td><input id="email" name="email" class="easyui-textbox" data-options="required:true,validType:'email',label:'邮箱：'" style="width: 260px">&nbsp;<span style="color: red">*</span></td>
            </tr>
            <tr>
                <td><input id="phone" name="phone" class="easyui-textbox" data-options="required:true,label:'联系电话：'" style="width: 260px">&nbsp;<span style="color: red">*</span></td>
                <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td>
                     <select id="roleName" name="roleName" class="easyui-combobox"  data-options="required:true,editable:false,panelHeight:'auto',label:'用户角色：'" style="width:260px">
                         <option value="">请选择角色...</option>
                         <option value="系统管理员">系统管理员</option>
                         <option value="销售主管">销售主管</option>
                         <option value="客户经理">客户经理</option>
                         <option value="高管">高管</option>
                     </select>&nbsp;<span style="color: red">*</span>
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="dlg-btns">
    <a href="javascript:saveUser()" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">保存</a>
    <a href="javascript:closeUserDialog()" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">关闭</a>
</div>

</body>
</html>

<script>

    $(function (){
        $('#s_userName').each(function (index,element){
            $(this).textbox('textbox').bind('keydown', function (e) {
                if (e.keyCode == 13) {   // 当按下回车键时接受输入的值。
                    searchCustomer();
                }
            });
        });
    });

    var url = "";

    function searchUser() {
        $("#dg").datagrid('load', {
            "userName": $("#s_userName").val()
        });
    }

    function openUserAddDialog() {
        $("#dlg").dialog("open").dialog("setTitle", "添加用户");
        url = "${pageContext.request.contextPath}/user/save.do";
    }

    function openUserModifyDialog() {
        var selectedRows = $("#dg").datagrid("getSelections");
        if (selectedRows.length != 1) {
            $.messager.alert("系统提示", "请选择一条要编辑的数据！");
            return;
        }
        var selectedRow = selectedRows[0];
        $("#dlg").dialog("open").dialog("setTitle", "编辑用户");
        $("#fm").form("load", selectedRow);
        url = "${pageContext.request.contextPath}/user/save.do?id=" + selectedRow.id;
    }

    function deleteUser() {
        var selectedRows = $("#dg").datagrid("getSelections");
        if (selectedRows.length == 0) {
            $.messager.alert("系统提示", "请选择要删除的数据！");
            return;
        }
        var idsArr = [];
        for (var i = 0; i < selectedRows.length; i++) {
            idsArr.push(selectedRows[i].id);
        }
        var idsStr = idsArr.join(",");
        $.messager.confirm("系统提示", "您确定要删除这<span style='color: red'>" + selectedRows.length + "</span>条记录吗？", function (r) {
            if (r) {
                $.post("${pageContext.request.contextPath}/user/delete.do", {ids: idsStr}, function (result) {
                    if (result.success) {
                        $.messager.alert("系统提示", "已成功删除数据！");
                        $("#dg").datagrid("reload");
                    } else {
                        $.messager.alert("系统提示", "删除数据失败，请联系系统管理员！");
                    }
                }, "json");
            }
        });
    }

    function saveUser() {
        $("#fm").form("submit", {
            url: url,
            onSubmit: function () {
                if ($("#roleName").combobox("getValue") == "") {
                    $.messager.alert("系统提示", "请选择用户角色！");
                    return false;
                }
                return $(this).form("validate");
            },
            success: function (result) {
                var result = eval("(" + result + ")");
                if(result.success){
                    $.messager.alert("系统提示", "保存成功！");
                }else{
                    $.messager.alert("系统提示","保存失败！");
                }
            }
        });
    }

    function closeUserDialog() {
        var dlgOptions = $("#dlg").dialog("options");
        if(dlgOptions.closed != true){
            $("#dlg").dialog("close");
        }
        $("#fm").form("reset");
        $("#dg").datagrid("reload");
    }

</script>
